import React, { Component } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import {
    Row,
    Col,
    Card,
    Spin,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import idcard from '../../assets/idcard.png';


export let profileState = false;

@connect(({ home }) => ({
    home
}))
// @Form.create()
export default class HomePage extends Component {
    state = {
        dataList: [],
        videoState: false,
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'home/fetch',
            callback: () => {
                const { home: { list } } = this.props;
                this.setState({
                    dataList: list
                })
            }
        });
    }

    handlePendingTask = () => {
        this.props.dispatch(routerRedux.push('/review/pending-task'));
    }
    handleCompletedTask = () => {
        this.props.dispatch(routerRedux.push('/review/completed-task'));
    }

    handleVideoPlay = () => {
        this.setState({ videoState: true })
    }
    render() {
        const { home: { list, loading } } = this.props;

        const spinContainer = {
            textAlign: 'center',
            marginBottom: '20px',
            margin: '50px 0'
        }

        const gridStyle = {
            width: '25%',
            height: 150,
            fontSize: '18px',
            color: 'black',
            textAlign: 'center',
            marginBottom: '20px',
            margin: '0px 0'
        }

        return (
            <PageHeaderLayout
                title="首页"
            >

                {loading ?
                    <div style={spinContainer}>
                        <Spin size="large" />
                    </div>
                    :
                    this.state.dataList.map((item) => {
                        return (
                            <Row gutter={{ md: 8, lg: 24, xl: 48 }} key={item.id}>
                                <Card
                                    key={item.id}
                                    bordered={false}
                                    style={{ marginBottom: 14, }}
                                >
                                    <Card.Grid style={gridStyle} key={item.id}>
                                        <Row style={{ marginBottom: 14, }} gutter={{ md: 6, lg: 24, xl: 48 }}>
                                            <Col>
                                                <img src={idcard} />
                                            </Col>
                                        </Row>
                                        <Row >
                                            <Col >
                                                {item.name + "(审批)"}
                                            </Col>
                                        </Row>
                                    </Card.Grid>

                                    <Card.Grid style={gridStyle} onClick={this.handlePendingTask} key={item.id}>
                                        <Row style={{ marginBottom: 14, marginTop: 10 }} gutter={{ md: 6, lg: 24, xl: 48 }}>
                                            <Col>待办
                                        </Col>
                                        </Row>
                                        <Row>
                                            <Col>
                                                {item.active}
                                            </Col>
                                        </Row>
                                    </Card.Grid>
                                    <Card.Grid style={gridStyle} onClick={this.handleCompletedTask} key={item.id}>
                                        <Row style={{ marginBottom: 14, marginTop: 10 }} gutter={{ md: 6, lg: 24, xl: 48 }}>
                                            <Col>今日已办
                                        </Col>
                                        </Row>
                                        <Row>
                                            <Col>
                                                {item.history}
                                            </Col>
                                        </Row>
                                    </Card.Grid>
                                    <Card.Grid style={gridStyle} key={item.id} >
                                        <Row style={{ marginBottom: 14, marginTop: 10 }} gutter={{ md: 6, lg: 24, xl: 48 }}>
                                            <Col>所有任务
                                        </Col>
                                        </Row>
                                        <Row>
                                            <Col>
                                                {item.allHistory}
                                            </Col>
                                        </Row>
                                    </Card.Grid>
                                </Card>
                            </Row>
                        );
                    })
                }
            </PageHeaderLayout>
        );
    }
}